<template>
  <el-checkbox-group
    v-model="formData[componentKey].value"
    size="medium"
    :disabled="
      (component ? component.disabled : formData[formKey].disabled) ||
      formData[formKey].disabled == true
        ? true
        : false
    "
    @change="$listeners.change($event)"
  >
    <el-checkbox-button
      v-for="item in formData[componentKey].options"
      :key="item.attrValue"
      :label="item.attrValue"
      >{{ item.attrValueName }}
    </el-checkbox-button>
  </el-checkbox-group>
</template>

<script>
import http from "../../utils/http";
export default {
  name: "DynBtncheckbox",
  props: {
    attrId: [String, Number],
    productId: [String, Number],
    value: [String, Array,Boolean],
    component: {
      type: Object,
    },
    formData: {
      type: Object,
    },
    formKey: {
      type: String,
    },
  },
  created() {
    if (this.component) {
      this.componentKey =
        this.component.pageTempStructId + "-" + this.component.attrId;
    } else {
      this.componentKey = this.formKey;
    }
    console.log(this.formData[this.componentKey].value);
    if (this.formData[this.componentKey].value == "") {
      this.formData[this.componentKey].value = [];
    }

    this.getAttrValueList();
  },
  data() {
    return {
      options: [],
      componentKey: "",
    };
  },
  computed: {

  },
  // watch:{
  //   'formData[componentKey].value':{
  //     handler(newValue,oldValue){
  //       console.log(newValue)
  //       console.log(oldValue)
  //     },
  //     immediate:true,
  //     deep:true
  //   }
  // },
  methods: {
    async getAttrValueList() {
      let res = await http({
        url: `${process.env.VUE_APP_CTX_ORDER_QUERY}/qryAttrValueList`,
        params: { attrId: this.attrId, productId: this.productId },
        method: "GET",
      });
      if (res.code == 200) {
        this.formData[this.componentKey].options = res.meta.attrValueList;
      } else {
      }
    },
  },
};
</script>
